<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //通过"$("exp")"会筛选出页面的一组满足表达式的元素
                //这一组元素的就属于JQuery包装集的元素
                //常用：获取包装集中的元素个数(size())
                //通过某个下标获取包装集中的某个元素(get(index))
                //某个元素在包装集中的位置(index())
                
                //包装集是数组,获取包装集中的元素个数
//                alert($("table").size());

//                alert($("table").length);
                
//                alert($("tr").length);
                
                //get之后得到的是js元素 。下标获取包装集中的某个元素
//                $($("tr").get(1)).css("color","#f00");
                
                //判断id为abc的tr在包装集的位置
//                alert($("tr").index($("tr#abc")));

                //通过表达式中通过，可以分割多个包装集 eq 等于
                //  包装集太多，有时候可以变动的时候，使用这种方式就不好操作
//                $("tbody tr:eq(2),tr#abc").css("color","#f00");

                //可以为包装集使用add方法 可以将新加入的元素添加到包装集中
//                $("tbody tr:eq(2)").add($("thead tr td:eq(2)"))
//                        .add("tr td:contains('3')").css("color","#f00");
            
                //not方法可以将包装集中的元素取消掉
//                $("tr").not("tr#abc").css("color","#f00");

                //获取tr中小于3的元素 le小于等于 这里不可用
//                $("tr").filter("tr:lt(3)").css("color","#f00");
    
                //slice
                //获取tr中的1，3形成一个新的包装集 返回值就是新的包装集
//                $("tr").css("background","#00f").slice(1,3).css("color","#f00");
                
                //!!!!!!!!!!!!!!!!!!!!!!重要的包装集
                //从包装集中“内部”获取相应的元素，返回的值也是新包装集
//                $("table").find("tr#abc").css("color","#f00");
                
                //is表示的是当前的包装集中是否有某个元素
                //$(table)的包装集中只有一个元素table 所以没有td
//                alert($("td").is("td:contains('用户')"));
                
                //children是所有的子元素
                //获取tbody中的所有元素位置等于3的tr子元素
                //这里返回的也是新包装集
//                $("tbody").children("tr:eq(3)").css("color","#f00");
            
                //找到下一个子元素,只是一个元素返回新包装集
//                $("tr#abc").next().css("color","#f00");
                
                //找到下一组兄弟元素 所有元素 返回的也是新包装集
//                $("tr#abc").nextAll().css("color","#f00");
                
                //parent仅仅只是返回上一级的div,新包装集
//                $("#s1").parent("div").css("color","#0f0");
            
                //parent返回所有满足条件的父类节点，新包装集
//                $("#s1").parents("div").css("color","#f00");
                
                //返回第3个tr的所有兄弟节点，返回新包装集
                var a = $("tr:eq(2)").siblings("tr").css("color","#f00")
                        .is("tr#abc");
                alert(a);
                
            });
                
                
        </script>
    </head>
    <body>
        <div id="d1">
            cdd
            <div>
                <span id="s1">abc</span>
            </div>
        </div>
        <table width="700" border="1" align="center">
            <thead>
                <tr>
                    <td>用户标识</td>
                    <td>用户姓名</td>
                    <td>用户年龄</td>
                    <td>用户密码</td>
                </tr>
            </thead>
            <tbody>
                <tr id="abc">
                    <td>1</td>
                    <td>张三</td>
                    <td>23</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>33</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>13</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>赵六</td>
                    <td>45</td>
                    <td>abc123</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>朱琪</td>
                    <td>21</td>
                    <td>abc123</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
